<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage" @changeID="changeID"></zy-table>
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @add="addPlan" @set="edit"></zy-form>
        <zy-form ref="zyform1" :dialog="dialog1" @add="addRecord"></zy-form>
        <el-dialog title="选择计划类型" :visible.sync="dialogVisible" width="40%">
            <el-button @click="addChoose(1)">周期</el-button>
            <el-button type="primary" @click="addChoose(2)">单次</el-button>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { recordAddApi, planAddApi, planStopApi, requestApi } from '@/requset/api'
import SearchManage from '@/components/basic/SearchManage.vue'

import { formConfig, column, config0, config1, config2 } from './formConfig.js'

export default {
    extends: SearchManage,
    data() {
        return {
            table_title: '维修计划',
            url: 'repair/replan',
            actions: [
                {
                    label: '添加',
                    icon: 'el-icon-folder-add',
                    click: () => {
                        this.dialogVisible = true
                    },
                    if: () => this.operate,
                },
            ],
            dialogVisible: false,
            formConfig: null,
            tableColumn: null,
            queryForm: {
                size: 20,
                page: 1,
                device_name: '',
                scope_id: null,
                cycle_id: null,
                type_id: null,
                scope_id_list: [],
                cycle_type: null,
                plan_state: null,
                content_id: null,
                id: null,
            },
            queryFormC: {
                size: 20,
                page: 1,
                device_name: '',
                content_id: null,
                scope_id: null,
                cycle_id: null,
                type_id: null,
                scope_id_list: [],
                cycle_type: null,
                plan_state: null,
                id: null,
            },
            dialog: {
                config: [],
                form: {},
                title: '设置',
            },
            dialog1: {
                config: [],
                form: {},
                title: '设置',
            },
        }
    },
    methods: {
        // 执行
        handleCheck(row) {
            let { id, plan_state } = row
            requestApi('post', 'repair/replan/stop', { id, plan_state }, true).then((res) => {
                if (res.data.success) {
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                    })
                    this.searchBtn()
                }
            })
        },
        // 新建
        addChoose(type_id) {
            if (type_id == 1) {
                this.dialog.config = config1.slice(0, config1.length - 1)

                this.dialog.title = '新建周期计划'
                this.dialog.form = {
                    title: null,
                    cycle_id: null,
                    plan_state: null,
                    content: '',
                    start_time: null,
                    device: [],
                    count: 0,
                    type_id,
                }
            } else if (type_id == 2) {
                this.dialog.config = config0
                this.dialog.title = '新建单次计划'
                this.dialog.form = {
                    title: null,
                    plan_state: null,
                    content: '',
                    cycle_id: 10,
                    start_time: null,
                    device: [],
                    type_id,
                }
            } else {
                this.dialog.config = config0
                this.dialog.title = '新建维修计划'
                this.dialog.form = {
                    title: null,
                    plan_state: null,
                    content: '',
                    cycle_id: 10,
                    start_time: null,
                    device: [],
                    type_id,
                }
            }
            this.btnType = 'add'
            this.$refs.zyform.openDialog(this.btnType)
        },
        addrecord(val) {
            this.btnType = 'add'
            this.dialog1.config = config2
            this.dialog1.title = '生成报告'
            this.dialog1.form = {
                title: val.title,
                reporter: sessionStorage.getItem('nick_name'),
                details: '',
                device_id: val.device_id,
                plan_id: val.id,
                photo: null,
                result: null,
                record_state: 1,
            }
            this.$refs.zyform1.openDialog(this.btnType)
        },
        addRecord(val) {
            delete val.title
            requestApi('post', 'repair/record/add', val, true).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.$router.push({
                        name: 'repair_record',
                        params: {
                            device_id: val.device_id,
                        },
                    })
                } else {
                    this.$message({
                        type: 'info',
                        message: '添加失败',
                    })
                }
                this.$refs.zyform1.closeDialog()
                this.dialogVisible = false
            })
        },
        handleEdit(row) {
            this.dialog.title = '设置计划'

            let type_id = row.type_id
            if (type_id == 1) {
                //定期计划
                let { id, title, cycle_id, content, start_time, count, plan_state, type_id } = row
                this.dialog.config = config1.slice(1, config1.length)
                this.dialog.form = { id, title, cycle_id, content, start_time, count, plan_state, type_id }
            } else {
                //单次计划
                this.dialog.config = config0.slice(1, config1.length)
                let { id, title, next_time, plan_state, content, type_id } = row
                this.dialog.form = { id, title, next_time, plan_state, content, type_id }
            }
            this.btnType = 'change'
            this.$refs.zyform.openDialog(this.btnType)
        },
        // 改变页码
        toRecord(val) {
            this.$router.push({
                name: 'repair_record',
                params: {
                    plan_id: val.id,
                },
            })
        },
        addPlan(form) {
            delete form.device
            requestApi('post', 'repair/replan/add', form, true).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.searchBtn()
                    this.dialogVisible = false
                } else {
                    this.$message({
                        type: 'info',
                        message: '添加失败',
                    })
                }
                this.$refs.zyform.closeDialog()
            })
        },
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'deviceType', 'cycleList']),
        tags() {
            if (this.pagination.total !== undefined) {
                return [
                    { title: '总数', num: this.pagination.total },
                    { title: '已过期', num: this.stat.pastdue },
                    { title: '未启用', num: this.stat.failed },
                    { title: '执行中', num: this.stat.running },
                ]
            } else return []
        },
    },
    created() {
        if (this.$route.params.id !== undefined) {
            this.queryForm.id = this.$route.params.id
        }
        this.searchBtn()
        formConfig[0].options = this.backstageData
        formConfig[2].options = this.cycleList
        config1[2].options = this.cycleList
        this.formConfig = formConfig
        column[column.length - 1].buttons = [
            {
                text: '生成报告',
                click: (val) => this.addrecord(val),
                if: () => this.operate,
                icon: 'el-icon-folder-add',
            },
            {
                text: '查看报告',
                click: (val) => this.toRecord(val),
                icon: 'el-icon-s-comment',
            },
            {
                text: '执行',
                click: (val) => this.handleCheck(val),
                if: (val) => val.plan_state === 2 && this.operate,
                icon: 'el-icon-video-play',
            },
            {
                text: '停止',
                click: (val) => this.handleCheck(val),
                if: (val) => val.plan_state === 1 && this.operate,
                icon: 'el-icon-switch-button',
            },
            {
                text: '设置',
                click: (val) => this.handleEdit(val),
                if: () => this.operate,
                icon: 'el-icon-edit',
            },
            {
                text: '删除',
                click: (val) => this.delete(val),
                if: () => this.operate,
                icon: 'el-icon-delete',
            },
        ]
        this.tableColumn = column
    },
}
</script>
